import { useState, useEffect } from "react";

interface ImagePreviewProps {
  isOpen: boolean;
  imageUrl: string;
  onClose: () => void;
}

const ImagePreview = ({ isOpen, imageUrl, onClose }: ImagePreviewProps) => {
  // 使用状态跟踪图片加载情况
  const [isLoading, setIsLoading] = useState(true);
  // 动画控制
  const [isAnimating, setIsAnimating] = useState(false);

  // 添加键盘事件监听，按ESC键关闭预览
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === "Escape") {
        onClose();
      }
    };

    if (isOpen) {
      document.addEventListener("keydown", handleKeyDown);
      // 打开时设置动画状态
      setIsAnimating(true);
      // 防止背景滚动
      document.body.style.overflow = "hidden";
    } else {
      // 恢复背景滚动
      document.body.style.overflow = "";
    }

    return () => {
      document.removeEventListener("keydown", handleKeyDown);
    };
  }, [isOpen, onClose]);

  // 图片加载完成后的处理
  const handleImageLoad = () => {
    setIsLoading(false);
  };

  // 当图片URL变化时重置加载状态
  useEffect(() => {
    if (imageUrl) {
      setIsLoading(true);
    }
  }, [imageUrl]);

  // 如果预览未打开，返回null
  if (!isOpen) return null;

  return (
    <div
      className={`fixed inset-0 z-50 flex items-center justify-center transition-all duration-300 ${
        isAnimating ? "backdrop-blur-sm" : "backdrop-blur-none"
      }`}
      onClick={onClose}
    >
      {/* 背景遮罩 - 减轻毛玻璃效果 */}
      <div className="absolute inset-0 bg-black/60 dark:bg-black/70 backdrop-blur-sm"></div>

      {/* 内容容器 */}
      <div className="relative z-10 max-w-[95vw] max-h-[95vh] overflow-hidden rounded-2xl shadow-2xl transform transition-all duration-500 scale-100">
        {/* 工具栏 */}
        <div className="absolute top-0 left-0 right-0 z-20 p-4 flex justify-end bg-gradient-to-b from-black/50 to-transparent">
          {/* 关闭按钮 */}
          <button
            className="p-2 rounded-full bg-black/30 text-white hover:bg-black/50 transition-all focus:outline-none focus:ring-2 focus:ring-white/50"
            onClick={(e) => {
              e.stopPropagation();
              onClose();
            }}
            aria-label="关闭预览"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              className="h-6 w-6"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M6 18L18 6M6 6l12 12"
              />
            </svg>
          </button>
        </div>

        {/* 图片容器 - 移除毛玻璃效果 */}
        <div className="relative bg-transparent rounded-2xl overflow-hidden">
          {/* 加载指示器 */}
          {isLoading && (
            <div className="absolute inset-0 flex items-center justify-center bg-black/50">
              <div className="relative flex">
                <div className="h-16 w-16 rounded-full border-4 border-gray-300 dark:border-gray-600 border-t-blue-500 dark:border-t-blue-400 animate-spin"></div>
                <div className="absolute inset-0 flex items-center justify-center">
                  <span className="text-xs text-white">加载中</span>
                </div>
              </div>
            </div>
          )}

          {/* 图片 */}
          <img
            src={imageUrl}
            alt="预览图片"
            className="max-w-full max-h-[90vh] object-contain"
            onClick={(e) => e.stopPropagation()}
            onLoad={handleImageLoad}
          />
        </div>
      </div>
    </div>
  );
};

export default ImagePreview;
